<template>
  <div>
    <div style="display: flex; margin-bottom: 20px; padding-right: 20%">
      <div class="leftBox">
        <img
          src="@/assets/images/保护动物·守护自然.png"
          alt=""
          style="width: 500px"
        />
      </div>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="border-bottom: 0px"
        activet-ext-color="balck"
      >
        <el-menu-item
          :index="`${indxe++}`"
          v-for="(item, indxe) in routerList"
          :key="indxe"
          @click="doTo(item)"
          style="height: 140px; padding-bottom: 10px"
          class="item"
        >
          <img :src="imageList[indxe - 1][1]" alt="" srcset="" />
          <!-- <img
            :src="imageList[indxe - 1][0]"
            alt=""
            srcset=""
            v-show="ulrShow"
          /> -->
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import imageList from '@/assets/images'
import navitem from '@/utils/toNative'
export default {
  name: 'NavitemPage',

  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      routerList: null,
      imageList: null,
      // ulrShow: false,
    }
  },

  mounted() {},
  created() {
    const RouterList = ['/home', '/history', '/animal', '/protect']
    this.routerList = navitem(this.$router.options.routes, RouterList)
    this.imageList = imageList
    console.log(this.imageList)
  },
  methods: {
    doTo(to) {
      this.$router.push(to.path)
      this.ulrShow = true
    },
  },
}
</script>

<style>
img {
  width: 140px;
  height: 140px;
}
.leftBox {
  flex: 1;
}
.item {
  background-color: transparent !important;
  border: 0px !important;
}
::v-deep .is-active {
  background-color: transparent !important;
}
</style>
